<template>
	<div class="wrap">
		<h1 class="header-title">我的宿舍</h1>
		<div class="dom_info">
			<ul class="list">
				<li v-for="dkey in Object.keys(domitory)" :key="dkey">
					<p class="title">{{ dkey }}</p>
					<p>{{ domitory[dkey] }}</p>
				</li>
			</ul>
		</div>

		<div class="change-rooom-log">
			<h2 class="header-title">我的申请换房记录</h2>
			<div class="table">
				<el-table
					:data="changeRoomHistory"
					:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
					:row-style="tableRowClassName"
					:highlight-current-row="true"
					:height="400">
					<el-table-column prop="changeId" label="申请编号" width="100" />
					<el-table-column prop="stuId" label="申请人学号" width="100" />
					<el-table-column prop="stuName" label="申请人姓名" />
					<el-table-column prop="college" label="学院" />
					<el-table-column prop="professional" label="专业" />
					<el-table-column prop="oldRoom" label="现住房间" />
					<el-table-column prop="newRoom" label="新房间" />
					<el-table-column prop="newBed" label="目标床位" />
					<el-table-column prop="buildId" label="目标楼栋" />
					<el-table-column prop="reason" label="申请原因">
						<template #default="{ row }">
							<p class="reason">{{ row.reason }}</p>
						</template>
					</el-table-column>
					<el-table-column prop="phone" label="联系方式" />
					<el-table-column prop="createTime" label="申请时间">
						<template #default="{ row }">
							{{ new Date(row.createTime).toLocaleDateString() }}
						</template>
					</el-table-column>
					<el-table-column prop="status" label="审核状态">
						<template #default="{ row }">
							<span :style="{ color: '#eebe77' }">{{ row.status }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" fixed="right">
						<template #default="{ row }">
							<el-button link type="danger" @click="handleDelClick(row)">撤回</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>


		<!-- 删除对话框 -->
		<DeleteDialog v-model:show="showDelDialog">
			<template #containt> {{ new Date(delTarget.createTime).toLocaleDateString() }} 号的申请 </template>
			<template #btn>
				<el-button type="primary" link @click="handleDelete">确认删除</el-button>
				<el-button type="danger" link @click="showDelDialog = false">取消</el-button>
			</template>
		</DeleteDialog>
	</div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { queryExchangeInfoByStu, deleteExchangeInfoByStu } from '@/utils/axios/stuReqest'
import DeleteDialog from '@/components/dialog/DeleteDialog.vue'

const userStore = useUserStore()
const domitory = computed(() => {
	let obj = {}
	obj['楼栋'] = userStore.userInfo.buildId
	obj['学院'] = userStore.userInfo.college
	obj['学号'] = userStore.userInfo.stuId
	obj['床位'] = userStore.userInfo.bed
	obj['房间号'] = userStore.userInfo.dormitory
	return obj
})

// 显示删除对话框
const showDelDialog = ref(false)
// 删除的换房申请记录目标
const delTarget = ref()


// 换房申请记录
const changeRoomHistory = ref([])

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}



// 处理修改点击事件
const handleDelClick = (val) => {
	showDelDialog.value = true
	delTarget.value = val
}

// 处理删除换房申请记录
const handleDelete = async () => {
	await deleteExchangeInfoByStu({ changeId: delTarget.value.changeId })
	let { data } = await queryExchangeInfoByStu({ currentPage: 1 })
	changeRoomHistory.value = data
	showDelDialog.value=false
}

onMounted(async () => {
	let { data } = await queryExchangeInfoByStu({ currentPage: 1 })
	changeRoomHistory.value = data
})
</script>

<style scoped lang="scss">
.change-rooom-log {
	margin: 100px 0 20px;
}
.header-title {
	font-size: var(--title-size);
	font-weight: var(--fontweight);
	margin-bottom: 30px;
}

.dom_info {
	width: 100%;
	.list {
		display: flex;
		li {
			width: 200px;
			background: rgb(230, 249, 253);
			padding: 5px;
			margin-left: 20px;
			border-left: 3px solid rgb(5, 203, 237);
			&:hover {
				box-shadow: 0 0 2px 2px rgba(5, 203, 237, 0.2);
			}
		}
	}
}

.title {
	color: rgb(5, 203, 237);
	margin: 0;
	font-size: 14px;
}
</style>
